<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet/less" href="./css/common.less">
  <link rel="stylesheet/less" href="./css/index.less">
  <link rel="stylesheet/less" href="./css/reset.less">
</head>

<body>
  <div id="jiazhai">
    <img src="./image/ajax-loader.gif" alt="" srcset="">
  </div>
  <!-- 头部信息 -->
  <div id="head">
    <div class="container">
      <div class="left">
        <div class="item">
          <span class="iconfont">&#xeb40;</span>
          <span>Mon-Friday 9am -5pm</span>
        </div>
        <div class="item">
          <span class="iconfont">&#xe611;</span>
          <span>123-123-123</span>
        </div>
        <div class="item">
          <span class="iconfont">&#xe604;</span>
          <span>email@domain.com</span>
        </div>
      </div>
      <div class="right">
        <div class="icon"><span class="iconfont">&#xe689;</span></div>
        <div class="icon"><span class="iconfont">&#xe87f;</span></div>
        <div class="icon"><span class="iconfont">&#xe883;</span></div>
        <div class="icon"><span class="iconfont">&#xe60b;</span></div>
      </div>
    </div>
  </div>
  <!-- 导航栏 -->
  <div id="header">
    <nav class="navbar navbar-default navbar-white" id="navbar-white">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Karting <span>Arena</span></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="./index.html">首页</a></li>
            <li><a href="./html/about.html">关于我们</a></li>
            <li><a href="./html/services.html">服务</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">画廊 <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li class="dropdown ">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                    aria-expanded="false">网格布局 <span class="caret"></span></a>
                  <ul class="dropdown-menu dropdown-menu-right er">
                    <li><a href="./html/gallery1.html">2 列</a></li>
                    <li><a href="#">3 列</a></li>

                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown ">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">博客 <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li><a href="#">右栏</a></li>
                <li><a href="#">一个博客</a></li>
              </ul>
            </li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </div>
  <!-- 轮播图 -->
  <div id="slide">
    <div class="previous" id="previous"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></div>
    <div class="next" id="next"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></div>
    <div class="slide_img ">
      <img src="./image/portfolio_img_6.jpg" alt="" srcset="" id="slide-img">
    </div>
    <div class="slide_content">
      <div class="slide_content1" id="slide-content">一个了不起的</div>
      <h2 id="slide-h2">卡丁车运动体验!</h2>
      <div class="slide_btn" id="btn1"><a href="#" id="slide-btn">了解更多</a></div>
    </div>

  </div>
  <!-- 介绍特点 -->
  <div id="col-4-section">
    <div class="container">
      <div class="titles">
        <h1>我们的特点</h1>
        <p>充分利用我们的会员资格</p>
      </div>
      <div class="col">
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div><span class="iconfont">&#xe849;</span></div>
          <h2>免费取消</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div><span class="iconfont">&#xebcf;</span></div>
          <h2>不收取预订费用</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
        <div class="row wow fadeInDown" data-wow-delay=".5s">
          <div><span class="iconfont">&#xf0fc;</span></div>
          <h2>可靠的传输</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
        <div class="row row wow fadeInUp" data-wow-delay=".5s">
          <div><span class="iconfont">&#xe7ae;</span></div>
          <h2>有竞争力的价格</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
        <div class="row row wow fadeInUp" data-wow-delay=".5s">
          <div><span class="iconfont">&#xe611;</span></div>
          <h2>客户支持</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
        <div class="row row wow fadeInUp" data-wow-delay=".5s">
          <div><span class="iconfont">&#xe686;</span></div>
          <h2>保养良好的车辆</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
      </div>

    </div>
  </div>
  <!-- 小标题 -->
  <div id="titles">
    <div class="container">
      <div class="title">
        <h1>即将来临的事件</h1>
        <p>我们的竞技项目</p>
      </div>
    </div>
  </div>
  <div id="col-5-section">
    <div class="container">
      <div class="col">
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="a">
            <img src="./picture/blog_img_1.jpg" alt="" srcset="">
            <span>1月1</span>
          </div>
          <div class="row1">
            <h2>2023年卡丁车赛事</h2>
            <div class="b">
              <span class="iconfont b1">&#xe63d;</span>
              <span class="b2">2023年1月1日- 9:00至3:00</span>
              <span class="iconfont b1">&#xe8fe;</span>
              <span class="c">卡丁车竞技场1</span>
            </div>

            <div class="d">卡丁车竞技场</div>
          </div>

        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="a">
            <img src="./picture/blog_img_2.jpg" alt="" srcset="">
            <span>3月1日</span>
          </div>
          <div class="row1">
            <h2>长距离卡丁车事件2022 </h2>
            <div class="b">
              <span class="iconfont b1">&#xe63d;</span>
              <span class="b2">2022-10：00至2：00</span>
              <span class="iconfont b1">&#xe8fe;</span>
              <span class="c">卡丁车竞技场2</span>
            </div>

            <div class="d">卡丁营</div>
          </div>

        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="a">
            <img src="./picture/blog_img_3.jpg" alt="" srcset="">
            <span>12月1</span>
          </div>
          <div class="row1">
            <h2>卡丁球馆最长圈</h2>
            <div class="b">
              <span class="iconfont b1">&#xe63d;</span>
              <span class="b2">十二月一日2023-8：00至2：00</span>
              <span class="iconfont b1">&#xe8fe;</span>
              <span class="c">卡丁车竞技场3</span>
            </div>

            <div class="d">卡丁营</div>
          </div>

        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="a">
            <img src="./picture/blog_img_4.jpg" alt="" srcset="">
            <span>4月1日</span>
          </div>
          <div class="row1">
            <h2>比赛纪录项目2023</h2>
            <div class="b">
              <span class="iconfont b1">&#xe63d;</span>
              <span class="b2">2023-9：00：00至2：00</span>
              <span class="iconfont b1">&#xe8fe;</span>
              <span class="c">卡丁车竞技场1</span>
            </div>

            <div class="d">卡丁车竞技场</div>
          </div>

        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="a">
            <img src="./picture/blog_img_5.jpg" alt="" srcset="">
            <span>9月2日</span>
          </div>
          <div class="row1">
            <h2>卡丁车赛场最长纪录</h2>
            <div class="b">
              <span class="iconfont b1">&#xe63d;</span>
              <span class="b2">九月二日2023-8：00至2：00</span>
              <span class="iconfont b1">&#xe8fe;</span>
              <span class="c">卡丁车竞技场2</span>
            </div>

            <div class="d">卡丁营</div>
          </div>

        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="a">
            <img src="./picture/blog_img_2.jpg" alt="" srcset="">
            <span>10月20日</span>
          </div>
          <div class="row1">
            <h2>最佳卡丁车表演项目2023</h2>
            <div class="b">
              <span class="iconfont b1">&#xe63d;</span>
              <span class="b2">2023-10：00至3：00</span>
              <span class="iconfont b1">&#xe8fe;</span>
              <span class="c">卡丁车竞技场3</span>
            </div>
            <div class="d">卡丁营</div>
          </div>

        </div>
      </div>

    </div>
  </div>
  <!-- 小标题 -->
  <div id="titles">
    <div class="container">
      <div class="title">
        <h1>令人惊叹的赛道</h1>
        <p>惊人的赛道平滑的性能</p>
      </div>
    </div>
  </div>
  <div id="col-6-section">

    <div class="col-img">
      <img src="./picture/blog_img_1.jpg" alt="" srcset="">
      <div class="mb">+</div>
    </div>
    <div class="col-img">
      <img src="./picture/blog_img_2.jpg" alt="" srcset="">
      <div class="mb">+</div>
    </div>
    <div class="col-img">
      <img src="./picture/blog_img_3.jpg" alt="" srcset="">
      <div class="mb">+</div>
    </div>
    <div class="col-img">
      <img src="./picture/portfolio_img_4.jpg" alt="" srcset="">
      <div class="mb">+</div>
    </div>
  </div>
  <div id="col-7-section">
    <div class="container">
      <div class="col">
        <img src="./picture/blog_img_5.jpg" alt="" srcset="" class="wow fadeInUp" data-wow-delay=".5s">
        <div class="row">
          <div class="title">
            <h2 class="wow fadeInUp" data-wow-delay=".7s">在路上旅行</h2>
            <span class="wow fadeInUp" data-wow-delay=".6s">带着平和的心态!</span>
          </div>
          <p class="wow fadeInUp" data-wow-delay=".5s">
            幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。但是，敌人和最低限度的风险，是一种不寻常的实践，而不是一种共同的结果。在淫荡的浮躁中，你会发现你的灵魂是纯洁的，你的灵魂是纯洁的，你的灵魂是纯洁的。
          </p>
          <div class="row1">
            <div class="img">
              <svg height="23.9021mm"
                style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
                version="1.1" viewbox="0 0 4271 2390" width="42.7085mm">
                <defs>
                  <style type="text/css">

                  </style>
                </defs>
                <g id="Layer_x0020_1">
                  <path class="fil0"
                    d="M1167 625c-2,0 -596,43 -884,277l-108 258c0,1 -1,2 -1,4 -16,33 -251,523 -25,697 366,108 960,114 1473,119 187,2 364,4 514,11l0 0c20,0 333,5 349,-41 2,-7 6,-37 13,-80 23,-167 75,-528 198,-729 81,-134 191,-200 342,-109l1 1 0 0c0,0 170,107 155,701l2 58 660 -167c14,-112 98,-702 296,-652 9,2 40,10 62,66 12,-106 8,-243 -69,-318 -31,-30 -67,-72 -109,-121 -169,-199 -440,-516 -789,-533 -261,-13 -641,-22 -971,-5 -233,12 -440,38 -561,84 -2,1 -4,1 -6,2 -10,2 -127,33 -524,469 -5,5 -12,8 -18,8l0 0zm-923 240c277,-229 826,-284 909,-291 384,-420 522,-472 544,-478 127,-48 339,-74 577,-86 331,-18 713,-9 975,4 373,19 652,346 827,551 42,49 77,90 105,118 157,153 62,498 56,521 -3,12 -14,20 -26,20 -15,0 -27,-12 -27,-26 0,-173 -37,-172 -37,-172l0 0c-2,0 -4,-1 -6,-1 -158,-46 -232,599 -235,623 -1,11 -8,21 -19,24l-710 180 0 0c-1,0 -3,0 -5,0 -14,1 -27,-10 -27,-25l-4 -92 0 0 0 -1c14,-566 -131,-657 -132,-657l0 0c-116,-71 -203,-16 -268,91 -117,192 -168,546 -191,709 -7,46 -11,78 -15,90 -28,82 -380,77 -400,77l-1 -1c-151,-6 -326,-8 -513,-10 -518,-5 -1119,-12 -1492,-123l0 0c-3,-1 -6,-2 -8,-4 -267,-198 -11,-733 6,-766l0 0 110 -265 0 0c2,-3 4,-7 7,-10z">
                  </path>
                  <path class="fil0"
                    d="M1206 633c-15,0 -27,-12 -27,-27 0,-14 12,-26 26,-26l1676 -7c20,-93 104,-466 201,-536 12,-8 29,-5 37,7 9,12 6,28 -6,36 -93,67 -181,507 -184,524 -2,12 -13,21 -26,21l-1697 8z">
                  </path>
                  <path class="fil0"
                    d="M3083 600c5,-27 100,-489 245,-472 68,8 186,78 301,167 113,88 224,195 277,279 8,12 4,28 -8,36 -4,3 -9,4 -14,4 -2,0 -779,26 -794,11 -7,-7 -9,-16 -7,-25zm239 -419c-86,-10 -163,317 -183,408 81,1 543,-19 695,-25 -56,-72 -146,-156 -238,-227 -107,-84 -216,-150 -274,-156z">
                  </path>
                  <path class="fil0"
                    d="M3558 337c1,-14 13,-26 27,-25 15,0 26,13 26,27l-9 222c-1,15 -13,26 -28,26 -14,-1 -26,-13 -25,-28l9 -222z">
                  </path>
                  <path class="fil0"
                    d="M368 918c43,-2 1037,-57 1336,15 10,3 18,11 20,21l0 0c0,1 79,402 -400,413 -42,2 -83,3 -123,4 -408,11 -769,20 -840,-85 -45,-67 -62,-180 -57,-259 2,-22 5,-42 10,-58 6,-20 16,-35 28,-43l0 0c8,-6 17,-8 26,-8zm1306 63c-311,-65 -1265,-13 -1303,-10l-1 0c-1,2 -3,7 -5,13 -4,13 -7,28 -8,47 -5,70 9,169 47,226 56,81 403,72 795,61 41,-1 82,-2 123,-3 362,-9 359,-265 352,-334z">
                  </path>
                  <g>
                    <path class="fil0"
                      d="M1757 1228c3,-16 54,-240 254,-323 121,-50 300,-71 424,-71 39,0 73,2 99,6 33,6 55,16 62,33 0,1 1,2 1,3 1,3 2,6 2,10 0,3 0,4 0,5l0 0c2,65 12,370 -817,370 -14,0 -26,-12 -26,-26 0,-3 0,-5 1,-7zm274 -274c-138,57 -195,192 -214,254 738,-8 731,-260 729,-315l0 0 0 -1c-3,0 -9,2 -21,0 -22,-3 -53,-5 -90,-5 -119,0 -290,20 -404,67zm568 -63c0,15 -11,27 -26,27l26 -27z">
                    </path>
                  </g>
                  <path class="fil0"
                    d="M242 947c0,-15 11,-27 26,-27 14,-1 27,11 27,25l9 278c1,12 -8,23 -20,26 -14,4 -108,27 -141,-70 -5,-14 2,-29 16,-34 14,-4 29,3 34,17 12,35 39,41 58,40l-9 -255z">
                  </path>
                  <path class="fil0"
                    d="M73 1821c-14,-1 -26,-13 -25,-27 0,-15 12,-26 27,-26l2423 74c14,0 26,13 25,27 0,15 -12,26 -27,26l-2423 -74z">
                  </path>
                  <path class="fil0"
                    d="M207 1787c-4,14 -19,21 -33,16 -14,-4 -21,-19 -17,-33 1,-1 96,-287 234,-293 120,-6 1110,23 1113,23 1,0 3,1 4,1l0 0c1,0 138,27 188,77 45,44 226,235 227,236 10,10 9,27 -1,37 -11,10 -28,9 -38,-1 0,-1 -181,-191 -225,-235 -35,-35 -142,-59 -159,-62 -53,-2 -992,-29 -1107,-24 -101,5 -185,257 -186,258z">
                  </path>
                  <path class="fil0"
                    d="M2574 898c-13,7 -29,2 -36,-11 -7,-13 -2,-29 11,-36 1,0 299,-157 329,-260 4,-14 19,-22 33,-18 14,4 22,18 18,32 -37,125 -354,293 -355,293z">
                  </path>
                  <path class="fil0"
                    d="M3165 1336c-14,2 -27,-8 -29,-23 -2,-14 8,-27 22,-29l783 -103c14,-2 28,8 29,23 2,14 -8,27 -22,29l-783 103z">
                  </path>
                  <path class="fil0"
                    d="M3582 650c-9,-12 -7,-28 5,-37 11,-9 28,-7 37,5 0,0 60,81 60,189 0,93 -22,854 -22,856 0,15 -12,26 -27,26 -15,0 -26,-12 -26,-27 0,-2 22,-751 22,-855 0,-91 -49,-157 -49,-157z">
                  </path>
                  <path class="fil0"
                    d="M175 1920c-3,-15 5,-29 19,-33 14,-4 29,5 32,19 1,0 54,204 296,265 76,20 185,19 288,-17 80,-29 155,-78 206,-157 8,-12 25,-15 37,-7 12,8 15,24 7,36 -58,89 -143,146 -232,177 -113,40 -235,41 -319,19 -272,-69 -334,-302 -334,-302z">
                  </path>
                  <path class="fil0"
                    d="M2044 2028c-1,-14 10,-27 24,-29 15,-1 28,10 29,25 0,0 20,257 286,300 25,4 50,7 76,9 132,12 286,2 415,-62 126,-64 229,-181 262,-383 3,-19 5,-38 7,-57 1,-15 14,-25 28,-24 15,1 26,14 24,29 -2,21 -4,41 -7,60 -36,222 -150,351 -291,422 -139,69 -303,81 -443,68 -27,-3 -54,-6 -79,-10 -307,-50 -331,-347 -331,-348z">
                  </path>
                  <path class="fil0"
                    d="M2535 1959c6,14 -1,29 -14,35 -5,2 -9,2 -14,2l27 11c1,24 5,57 13,93 22,97 76,214 199,210 15,-1 27,11 27,25 1,15 -11,27 -25,27 -159,6 -226,-134 -253,-250 -9,-40 -13,-76 -14,-103 -1,-14 0,-26 3,-36 -1,-5 -1,-10 2,-15 5,-12 18,-18 30,-15l0 0c2,0 3,0 4,1l0 0 0 0c7,3 12,8 15,15z">
                  </path>
                  <path class="fil0"
                    d="M2773 1161c-13,6 -29,1 -35,-12 -7,-13 -1,-29 12,-35 0,-1 222,-113 382,115 8,12 5,28 -6,36 -12,9 -29,6 -37,-6 -134,-191 -315,-98 -316,-98z">
                  </path>
                  <path class="fil0"
                    d="M3709 1716c-1,-15 10,-27 24,-28 15,-1 27,10 28,24 0,1 10,192 114,192 5,0 21,1 37,1 108,2 225,4 264,-174 46,-216 7,-479 7,-480 -2,-14 8,-28 22,-30 15,-2 28,8 30,23 0,1 41,273 -8,498 -48,221 -186,218 -316,216 -10,-1 -18,-1 -36,-1 -154,0 -166,-241 -166,-241z">
                  </path>
                  <path class="fil0"
                    d="M4194 1199c11,10 11,27 1,37 -10,11 -27,11 -38,1 0,0 -76,-77 -110,68 -22,98 -33,263 -20,390 5,50 13,93 26,124 10,23 21,38 32,38 3,0 7,0 11,-2 14,-6 29,1 34,15 6,13 -1,28 -14,34 -11,4 -22,6 -33,6 -35,-2 -61,-28 -79,-71 -14,-36 -24,-84 -30,-138 -13,-134 -2,-306 22,-408 55,-237 198,-94 198,-94z">
                  </path>
                </g>
              </svg>
            </div>

            <div class="conts">
              <h3>保养良好的车辆</h3>
              <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
            </div>

          </div>
          <div class="row1">
            <div class="img">
              <svg version="1.1" viewbox="0 0 100 100" style="height: 75%;" xml:space="preserve">
                <g id="network"></g>
                <g id="connection"></g>
                <g id="page"></g>
                <g id="support"></g>
                <g id="configuration"></g>
                <g id="cloud_storage"></g>
                <g id="password"></g>
                <g id="search_engine"></g>
                <g id="history"></g>
                <g id="SEO"></g>
                <g id="optimization"></g>
                <g id="backlink"></g>
                <g id="performance">
                  <path
                    d="M50,19C25.1,19,4.9,38.5,4,63.4C4,64.8,5.2,66,6.6,66c1.2,0,2.2-0.8,2.6-2c4-14.2,17-24,31.8-24c6.9,0,13.5,2.1,19.1,6.1   l-17.6,17C42,63.1,41.5,63,41,63c-5,0-9,4-9,9s4,9,9,9s9-4,9-9c0-0.5-0.1-1-0.1-1.5l14-21.3c4.2,4.1,7.3,9.2,8.9,14.8   c0.3,1.2,1.4,2,2.6,2h18c0.7,0,1.4-0.3,1.9-0.8c0.5-0.5,0.8-1.2,0.7-1.9C95,38.5,74.8,19,50,19z M67.9,24.8L55.4,41.1   c-4.2-1.9-8.7-3-13.4-3.1V21.7c2.6-0.5,5.2-0.7,8-0.7C56.4,21,62.4,22.4,67.9,24.8z M27.9,40.6l-4.8-10.5   c4.9-3.8,10.6-6.5,16.9-7.9V38C35.8,38.1,31.7,39,27.9,40.6z M7.3,63.5C7.2,63.8,6.9,64,6.6,64C6.3,64,6,63.7,6,63.4   c0.2-6.1,1.7-11.9,4.1-17.1l4.9,3.3C11.5,53.5,8.8,58.2,7.3,63.5z M16.4,48.1L11,44.5c2.6-5,6.2-9.5,10.5-13.1l4.5,10   C22.5,43,19.2,45.3,16.4,48.1z M41,79c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S44.9,79,41,79z M44.7,63.8l19.6-18.9L62.9,47   c0,0,0,0,0,0c-0.1,0.1-0.1,0.2-0.1,0.2L49.1,68.1C48.2,66.2,46.6,64.6,44.7,63.8z M64.9,47.5l5.9-9c0.3-0.4,0.2-1-0.2-1.3   s-1-0.3-1.3,0l-7.7,7.4c-1.4-1-2.8-1.9-4.3-2.7l12.5-16.3c7.1,3.6,13.1,9,17.4,15.6l-19.5,8.8c0,0-0.1,0.1-0.1,0.1   C66.7,49.2,65.8,48.4,64.9,47.5z M93.8,63.8c-0.1,0.1-0.3,0.2-0.5,0.2h-18c-0.3,0-0.5-0.2-0.6-0.5c-1.2-4.3-3.2-8.2-5.9-11.7   L88.2,43c3.4,6,5.5,12.9,5.8,20.3C93.9,63.6,93.8,63.7,93.8,63.8z">
                  </path>
                </g>
                <g id="analytics"></g>
                <g id="security"></g>
                <g id="dark_web"></g>
                <g id="video_player"></g>
                <g id="upload_download"></g>
                <g id="incognito_tab"></g>
                <g id="bookmark"></g>
              </svg>
            </div>

            <div class="conts">
              <h3>保养良好的车辆</h3>
              <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
            </div>

          </div>
          <div class="abq wow fadeInUp" data-wow-delay=".5s">
            <a href="javascript:;">开始&nbsp;></a>
          </div>

        </div>
      </div>
    </div>
  </div>
  <div id="col-8-section">
    <div class="row">
      <span class="iconfont che">&#xe936;</span>
      <div class="sz">200</div>
      <p>车辆可用</p>
    </div>
    <div class="row">
      <span class="iconfont">&#xe686;</span>
      <div class="sz">400</div>
      <p>教练可用</p>
    </div>
    <div class="row">
      <span class="iconfont">&#xef2e;</span>
      <div class="sz">25</div>
      <p>奖</p>
    </div>
  </div>
  <!-- 小标题 -->
  <div id="titles">
    <div class="container">
      <div class="title">
        <h1>我们值得信赖的成员</h1>
      </div>
    </div>
  </div>
  <div id="col-9-section">
    <div class="container">
      <div class="col">
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="col9-img">
            <img src="./picture/team-member-1.jpg" alt="" srcset="">
          </div>
          <h4>约翰杰</h4>
          <h6>卡丁车大师-二级</h6>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          <div class="icon">
            <div class="icon1"><span class="iconfont">&#xe689;</span></div>
            <div class="icon1"><span class="iconfont">&#xe87f;</span></div>
            <div class="icon1"> <span class="iconfont">&#xe883;</span></div>
          </div>
        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="col9-img">
            <img src="./picture/team-member-2.jpg" alt="" srcset="">
          </div>
          <h4>约翰杰</h4>
          <h6>卡丁车大师-二级</h6>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          <div class="icon">
            <div class="icon1"><span class="iconfont">&#xe689;</span></div>
            <div class="icon1"><span class="iconfont">&#xe87f;</span></div>
            <div class="icon1"> <span class="iconfont">&#xe883;</span></div>
          </div>
        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="col9-img">
            <img src="./picture/team-member-3.jpg" alt="" srcset="">
          </div>
          <h4>约翰杰</h4>
          <h6>卡丁车大师-二级</h6>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          <div class="icon">
            <div class="icon1"><span class="iconfont">&#xe689;</span></div>
            <div class="icon1"><span class="iconfont">&#xe87f;</span></div>
            <div class="icon1"> <span class="iconfont">&#xe883;</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 小标题 -->
  <div id="titles" class="wow fadeInUp" data-wow-delay=".5s">
    <div class="container">
      <div class="title">
        <h1>定价信息</h1>
      </div>
    </div>
  </div>
  <div id="col-10-section">
    <div class="container">
      <div class="col">
        <div class="row wow fadeInUp" data-wow-delay="1s">
          <h1>基本</h1>
          <h2>$49</h2>
          <div class="contes">
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>自行车服务</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>竞争分析</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>事件信息</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度管理</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度报告</p>
            </div>
          </div>
          <div class="btn">
            立即购买
          </div>
        </div>
        <div class="break wow fadeInUp" data-wow-delay="1s">
          <h1>溢价</h1>
          <h2>$99</h2>
          <div class="contes">
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>自行车服务</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>竞争分析</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>事件信息</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度管理</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度报告</p>
            </div>
          </div>
          <div class="btn">
            立即购买
          </div>
        </div>
        <div class="row wow fadeInUp" data-wow-delay="1s">
          <h1>会员</h1>
          <h2>$199</h2>
          <div class="contes">
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>自行车服务</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>竞争分析</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>事件信息</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度管理</p>
            </div>
            <div class="conte">
              <div class="duigou"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
              <p>月度报告</p>
            </div>
          </div>
          <div class="btn">
            立即购买
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="title">
    <div class="wz wow fadeInUp" data-wow-delay=".5s">开始与充分包装的功能与惊人的设计这个主题</div>
    <div class="a wow fadeInUp" data-wow-delay=".5s"><a href="javascript:;">开始&nbsp;></a></div>
  </div>
  <!-- 小标题 -->
  <div id="titles">
    <div class="container">
      <div class="title">
        <h1>访问我们的博客</h1>
      </div>
    </div>
  </div>
  <div id="col-11-section">
    <div class="container">
      <div class="col">
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="a">
            <img src="./picture/blog_img_1.jpg" alt="" srcset="">
            <span>卡丁车运动</span>
          </div>
          <div class="row1">

            <div class="b">
              <span class="iconfont b1">&#xe63d;</span>
              <span class="b2">2023年1月1日</span>
            </div>
            <h2>最长业绩记录</h2>
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
            <div class="d">阅读更多</div>
          </div>

        </div>
        <div class="row wow fadeInUp" data-wow-delay="1s">
          <div class="a">
            <img src="./picture/blog_img_2.jpg" alt="" srcset="">
            <span>卡丁车运动</span>
          </div>
          <div class="row1">

            <div class="b">
              <span class="iconfont b1">&#xe63d;</span>
              <span class="b2">2023年1月1日</span>
            </div>
            <h2>性能平稳的新型卡丁车</h2>
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
            <div class="d">阅读更多</div>
          </div>

        </div>
        <div class="row wow fadeInUp" data-wow-delay="1.5s">
          <div class="a">
            <img src="./picture/blog_img_3.jpg" alt="" srcset="">
            <span>卡丁车</span>
          </div>
          <div class="row1">
            <div class="b">
              <span class="iconfont b1">&#xe63d;</span>
              <span class="b2">2023年1月1日</span>
            </div>
            <h2>最佳性价比奖</h2>
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
            <div class="d">阅读更多</div>
          </div>

        </div>

      </div>

    </div>
  </div>
  <div id="buttom">
    <div class="container">
      <div class="top">
        <div class="buttom">
          <div class="logo">
            Karting <span>Arena</span>
          </div>
          <div class="conte">
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。我不认为这是一种暂时的意外，但我认为这是一种巨大的意外。</p>
            <div class="icon">
              <div class="icon1"><span class="iconfont">&#xe689;</span></div>
              <div class="icon1"><span class="iconfont">&#xe87f;</span></div>
              <div class="icon1"><span class="iconfont">&#xe883;</span></div>
              <div class="icon1"><span class="iconfont">&#xe60b;</span></div>
            </div>
          </div>
        </div>
        <div class="buttom">
          <div class="a">有用的服务</div>
          <div class="a1">
            <a href="javascript:;">教练</a>
            <a href="javascript:;">车辆</a>
            <a href="javascript:;">预订</a>
            <a href="javascript:;">道路</a>
            <a href="javascript:;">折扣</a>
          </div>
        </div>
        <div class="buttom">
          <div class="b">需要帮忙吗?</div>
          <div class="b1">
            <div class="item">
              <span class="iconfont">&#xe604;</span>
              <span>email@domain.com</span>
            </div>
            <div class="item">
              <span class="iconfont">&#xe611;</span>
              <span>123-123-123</span>
            </div>
            <div class="item">
              <span class="iconfont">&#xefec;</span>
              <span>knowledgeaware.tk</span>
            </div>

          </div>
        </div>
      </div>

      <div class="buttom1">
        <div class="left">
          <p>Copyright © 2024.Company name All rights reserved.</p>
        </div>
        <div class="right">
          <a href="javascript:;">教练</a>
          <a href="javascript:;">车辆</a>
          <a href="javascript:;">预订</a>
          <a href="javascript:;">道路</a>
          <a href="javascript:;">折扣</a>
        </div>
      </div>
    </div>
  </div>
  <div id="back">
    <a href="#head">
      <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
    </a>

  </div>

</body>

</html>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/less.min.js"></script>
<script src="./js/wow.min.repeat.js"></script>
<script src="./js/common.js"></script>
<script>
  var index = 0
  
  const img = ['./image/portfolio_img_6.jpg', './image/slider_img_1.jpg']
  const content = ['一个了不起的', '很棒的卡丁车']
  const title = ['卡丁车运动体验!', '惊人的轨道!']
  const btn = ['了解更多', '联系我们>>']
  $('#previous').click(() => {
    if (index == 0) {
      index = img.length - 1
    } else {
      index--;
    }
    a();
  })

  $('#next').click(() => {
    if (index == (img.length - 1)) {
      index = 0
    } else {
      index++;
    }
    a();
  })
  function a() {
    $('#slide-img')[0].src = img[index]
    // requestAnimationFrame(()=>{

    // })
    $('#slide-img')[0].animate({
      scale: 1.5
    }, 1000, 'linear')
    $('#slide-img').css('transform', 'scale(1.5)');
    $('#slide-content').text(content[index])
    $('#slide-h2').text(title[index])
    $('#slide-btn').text(btn[index])
    $('#slide-content').css({ animation: 'at 1s 1s linear both' });
    $('#slide-h2').css({ animation: 'at 1s 1s linear both' });
    $('#btn1').css({ animation: 'at 1s 1s linear both' });
  }
  var t = true
  //给整个页面绑定一个滚动条事件
  $(document).scroll(function () {
    var distance = $(this).scrollTop();
    if (distance > 3486 && t||distance > 8085 && t) {
      $('.sz').each(function () {
       var t= new Map()
        var t1 = parseInt($(this).text())
        var s = 2000 / t1
        var con = 0
        var T = setInterval(() => {
          $(this).text(con)
          if (con == t1) {
            clearInterval(T)
          }
          con++
        }, s)
        // 这里可以对每个具有类名 .sz 的元素进行操作
      });
      t = false

    }
  }
  )

</script>